<template>
  <div>
    <h2>电影详情</h2>

    <RouterLink to="/film/6588">猜你喜欢 二手杰作</RouterLink>

    <hr />
    <p>电影Id: {{ info?.filmId }}</p>
    <p>电影Name: {{ info?.name }}</p>
    <img :src="info?.poster" alt="" style="width: 100%;">
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      info: null
    }
  },


  watch: {
    $route(newVal) {
      console.log('$route 改变了', newVal)
      // 调用 refresh 方法  调用接口
      this.refresh(newVal.params.id)
    }
  },

  methods: {
    async refresh(id) {
      const { data } = await axios.get('https://m.maizuo.com/gateway', {
        params: {
          // 这里如果采用 beforeRouteUpdate 的方式的话，该 id 获取的还是上次的参数
          // filmId: this.$route.params.id

          filmId: id
        },
        headers: {
          'X-Host': 'mall.film-ticket.film.info'
        }
      })

      if (data.status !== 0) {
        console.error('请求有错误', data.msg)
        return
      }

      this.info = data.data.film

      console.log('data', data)
    }
  },

  created() {
    console.log('created')

    this.refresh(this.$route.params.id)
  },

  unmounted() {
    console.log('unmounted')
  },

  /**
   * 导航守卫：
   *    概念
   *      与生命周期钩子函数类似，都是在某种情况下自动触发的函数
   * 
   *    使用 beforeRouteUpdate 守卫来解决 详情页直接跳转详情页，组件缓存数据不更新的问题
   * 
   * 
   *    to - 要去的路由信息对象 
   *    from - 当前的路由信息对象
   */
  // beforeRouteUpdate(to, from) {
  //   console.log('beforeRouteUpdate to', to)
  //   console.log('beforeRouteUpdate from', from)

  //   this.refresh(to.params.id)
  // }
}
</script>
